<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-14 20:03:18
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-27 16:16:42
-->
<template>
<div class="main_page">
    <el-container class="content">
      <div class="header">
        <div class="title">{{ this.fun }}</div>
        <div class="other">联系客服</div>
      </div>
      <el-container>
        <el-aside>
          <el-menu
            :default-active="this.$router.path"
            router
            mode="vertical"
          >
            <el-menu-item
              v-for="(item, i) in navList"
              :key="i"
              :index="item.name"
            >
              {{ item.navItem }}
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main style="background-color: #fff">
          <router-view />
        </el-main>
      </el-container>
      </el-container>
  </div>
</template>

<script>
export default {
  // components: { forBuyer },
  data() {
    return {
      name: "用户名",
      fun: "店铺",
      part: "首页",
      navList: [
        { name: "/saler", navItem: "首页" },
        { name: "/saler/orderList", navItem: "订单列表" },
        { name: "/saler/applyList", navItem: "供应列表" },
        { name: "/saler/infomationManage", navItem: "店铺信息管理" },
        { name: "/saler/recent", navItem: "发布动态" },
      ],
    };
  },
  methods: {
    async load() {
      let sid = this.$store.state.saler.saler_id
      await this.$API.getOneSupplier(sid).then(response => {
        if (response.status == 200) {
          this.fun = response.data.supplier_name
        }
      })
    }
  },
  created() {
    if (this.$store.state.params.sid) this.$store.state.saler.saler_id = this.$store.state.params.sid
    this.load()
  }
};
</script>
<style lang="less" scoped>
.main_page {
  width: @width-content;
  margin: 0 auto;
  background-color: red;
  background-color: #fff;
  .content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
      background-color: #67c23a;
      height: 60px;
      line-height: 60px;
      color: #fff;
      .title{
        padding-left: 20px;
        float: left;
      }
      .other{
        float: right;
        padding-right: 20px;
      }
    }
    .el-aside {
      width: 20%;
      text-align: left;
      .el-menu {
        background-color: #f4f5f6;
        min-height: 1100px;
        .el-menu-item {
          font-weight: 700;
        }
      }
    }
    .el-main{
      width: 80%;
    }
  }
}
</style>
